<template>
  <div>
    <Category :disadled="aaa" />

    <SpuList
      v-if="showStatus === compStatus['SpuList']"
      @changeStatus="changeStatus"
    ></SpuList>
    <AddSpu
      v-if="showStatus === compStatus['AddSpu']"
      @changeStatus="changeStatus"
      :spuInfo="spuInfo"
    ></AddSpu>
    <AddSku
      v-if="showStatus === compStatus['AddSku']"
      @changeStatus="changeStatus"
      :spuInfo="spuInfo"
    ></AddSku>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type { spuInfoItemType } from "@/api/spu";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import SpuList from "./components/SpuList.vue";
import AddSpu from "./components/AddSpu.vue";
import AddSku from "./components/AddSku.vue";

const aaa = ref(false);
//定义一个枚举 代表组件状态
enum compStatus {
  SpuList,
  AddSpu,
  AddSku,
}

//初始化数据 控制三个子组件的条件渲染
const showStatus = ref(compStatus["SpuList"]);

const spuInfo = ref<spuInfoItemType>({
  spuName: "",
  description: "",
  category3Id: null,
  tmId: null,
  spuSaleAttrList: [],
  spuImageList: [],
});
//子修改父的状态的自定义事件函数
const changeStatus = (status: number, row?: spuInfoItemType) => {
  showStatus.value = status;
  if (row) {
    spuInfo.value = row;
  } else {
    spuInfo.value = {
      spuName: "",
      description: "",
      category3Id: null,
      tmId: null,
      spuSaleAttrList: [],
      spuImageList: [],
    };
  }
};
</script>

<style scoped></style>
